<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Region Craiglist</title>
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery-1.6.2.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery-ui-1.8.16.custom.min.js"/>"></script>
<script type="text/javascript">
	$(function() {

		// Accordion
		$("#accordion").accordion({
			header : "h3"
		});
		
		$("#accordion2").accordion({
			header : "h3"
		});
		
		$("#accordion3").accordion({
			header : "h3"
		});

	});
</script>
</head>
<body>

	<c:set var="numberofcategories" value="${fn:length(region.categories)}"
		scope="page" />

	<div id="div_region1">
		<div id="accordion">
			<c:forEach var="category" items="${region.categories}" begin="0"
				end="${numberofcategories/3}" step="1">

				<div>
					<h3>
						<a href="#"><c:out value="${category.name}" /> </a>
					</h3>
					<ul>
						<c:forEach var="item" items="${category.items}">
							<li><a
								href="<c:url value="/region/${country_name}/${region.name}/item/${item.name}"/>">
									<c:out value="${item.name}" /> </a>
							</li>
						</c:forEach>
					</ul>

				</div>

			</c:forEach>
		</div>
	</div>
	<div id="div_region2">
		<div id="accordion2">
			<c:forEach var="category" items="${region.categories}"
				begin="${numberofcategories/3+1}" end="${2*numberofcategories/3}"
				step="1">

				<div>
					<h3>
						<a href="#"><c:out value="${category.name}" /> </a>
					</h3>
					<ul>
						<c:forEach var="item" items="${category.items}">
							<li><a
								href="<c:url value="/region/${country_name}/${region.name}/item/${item.name}"/>">
									<c:out value="${item.name}" /> </a>
							</li>
						</c:forEach>
					</ul>

				</div>

			</c:forEach>
		</div>
	</div>
	<div id="div_region3">
		<div id="accordion3">
			<c:forEach var="category" items="${region.categories}"
				begin="${2*numberofcategories/3+1}" end="${numberofcategories}"
				step="1">

				<div>
					<h3>
						<a href="#"><c:out value="${category.name}" /> </a>
					</h3>
					<ul>
						<c:forEach var="item" items="${category.items}">
							<li><a
								href="<c:url value="/region/${country_name}/${region.name}/item/${item.name}"/>">
									<c:out value="${item.name}" /> </a>
							</li>
						</c:forEach>
					</ul>

				</div>

			</c:forEach>
		</div>
	</div>

</body>
</html>